<template>
    <header>
        <div class="banxin tanxin">
            <h1>欢迎来到叩丁狼积分商城</h1>
            <ul>
                <li>
                    <img :src="userInfo.userImage" alt="">
                    用户名：{{userInfo.userName}}
                </li>
                <li>我的积分：{{userInfo.userFraction}} </li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li v-if="$store.state.shoppingCartOrLogin">
                    <img src="../assets/images/Shopping.png" alt="">
                    <span>购物车</span>
                    <i>{{userInfo.userCartNumber}}</i>
                </li>
                <li @click="loginClick" v-else>
                    <span>登录</span>
                </li>
            </ul>
            <div class="end" @click="exitWeiXin">
                解绑微信
            </div>
        </div>
        <BaseTaost :msgees="err" :icon="icon" />
    </header>
</template>

<script>
// 引入请求用户信息的接口
import { getUserProfiles , WeixinApi , unWechatUsersBinding } from "@/request/Api";
import BaseTaost from "./baseTaost.vue";
export default {
    data () {
        return {
            //用户的信息
            userInfo:{
                // 是否有请求信息 判断code是否是0
                // 用户头像
                userImage : require('../assets/images/userImg.png'),
                // 用户名
                userName : '游客',
                // 用户积分
                userFraction : '--',
                // 用户购物车中的数量
                userCartNumber : 5
            },
            err : '',
            icon : '',
        }
    },
    components:{
        BaseTaost
    },
    methods:{
        loginClick(){
            this.$store.commit('changeLoginIsShow',true)
        },
        exitWeiXin(){
            unWechatUsersBinding().then((res)=>{
                console.log(res);
                this.$store.commit("changeInfoWindow", true);
                this.err = res.data.data;
                this.icon = "icon-toast_chenggong"
                localStorage.removeItem('token')
            })
        }
    },
    // 开局就发送请求
    created(){
        // this.$store.commit("changeInfoWindow", false);
        // 这个code是扫码返回的code 需要携带去请求参数
        let code = (this.$route.query.code);
        if(localStorage.getItem('token')){
            getUserProfiles().then(res=>{
            // 这个请求是获取用户信息的请求  需要携带请求头 如果没有 就不会返回  那么我们先判断用户是否扫描二维码登录了
            // 携带请求头 token 获取用户信息
                if(res.data.code === 0){
                    let info = res.data.data.userInfo
                    // 用户名
                    this.userInfo.userName = info.nickName
                    // 用户积分
                    this.userInfo.userFraction = info.coin
                    // 用户头像
                    this.userInfo.userImage = info.headImg
                    // 购物车数量
                    this.userInfo.userCartNumber = res.data.data.cartTotal
                    // 显示购物车
                    this.$store.commit('changeShoppingCartOrLogin',true)
                }
            })
        }else if(code){
            // 如果用户使用了手机登录了 那么就会有token  那么就不需要使用微信  最先判断是否有token
            
            // 获取token参数 后面会做判断

            WeixinApi({code}).then(res=>{
                console.log(res);
                if(res.data.code === 400) {
                    this.$store.commit("changeInfoWindow", true);
                    this.err = '登录信息过期,请重新登录!!!';
                    this.icon = "icon-toast_chenggong"
                    // 返回值400  重新登录 打开登录框让用户重新登录 
                    this.$store.commit('changeLoginIsShow',true)
                }else if(res.data.code === 407) {
                    // console.log('存储uuid,强制绑定手机号');
                    this.$store.commit("changeInfoWindow", true);
                    this.err = '微信登录成功!请绑定手机号!!';
                    this.icon = "icon-toast_chenggong"
                    // 到了这一步 存储uuid  绑定手机号码
                    sessionStorage.setItem('uuid',res.data.uuid)
                    // 存储后携带uuid , 手机号 ,验证码 等去绑定手机号
                    // 打开login界面 让用户去绑定手机号码  这次绑定发送的请求就是别的请求
                    this.$store.commit('changeLoginIsShow',true)
                }else if(res.data.code === 0){
                    // console.log('登录成功 手机号也绑定好了');
                    // 绑返回的token
                    localStorage.setItem('token',res.data['x-auth-token'])
                    // 更新
                    let info = res.data.data.userInfo
                    // 用户名
                    this.userInfo.userName = info.nickName
                    // 用户积分
                    this.userInfo.userFraction = info.coin
                    // 用户头像
                    this.userInfo.userImage = info.headImg
                    // 购物车数量
                    this.userInfo.userCartNumber = res.data.data.cartTotal
                    // 显示购物车
                    this.$store.commit('changeShoppingCartOrLogin',true)
                }
            })
        }
        
        
        
        
    }
}
</script>
 
<style lang = "less" scoped>
    @import '../assets/base.less';
    header {
        width: 100%;
        height: 40px;
        background-color: #242B39;
        color: #FFFEFE ;
        font-size: 14px;
        .tanxin {
            h1{
                cursor: pointer;
            }
            align-items: center;
            height: 40px;
            ul {
                display: flex;
                align-items: center;
                li {
                    margin: 0 10px;
                    cursor: pointer;
                    &:nth-child(1){
                        display: flex;
                        align-items: center;
                        img {
                            height: 26px;
                            margin-right: 3px;
                            border-radius: 50%;
                        }
                    }
                    &:nth-last-child(1){
                        background-color: @blue;
                        height: 40px;
                        width: 100px;
                        padding: 0 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        i{
                            background-color: @orange;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 20px;
                        }
                    }
                }
                
            }
            .end {
                color: red;
                cursor: pointer;
            }
        }
    }
</style>